import React, {useEffect, useState} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  TextInput,
  Image,
  ScrollView,
} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import dayjs from 'dayjs';
import {Calendar, CalendarList, Agenda} from 'react-native-calendars';
import AreaView from '../../components/Layout/AreaView';
import BaseUrl from '../../config/BaseUrl';
import styles from './style';
// import px2dp from '../../utils/px2dp';
import {courseList} from '../../service/my';

const MyTimeTable = (props) => {
  const {
    route: {
      params: {custId},
    },
  } = props;
  const navigation = useNavigation();
  const [selected, setSelected] = useState(dayjs().format('YYYY-MM-DD'));
  const onDayPress = (day) => {
    setSelected(day.dateString);
  };
  const [pn, setPn] = useState(1);
  const [list, setList] = useState([]);
  useEffect(() => {
    courseList({pn, ps: 10000, custId}).then((res) => {
      console.log(res, 'courseList');
      setList(res.rows);
    });
  }, [pn]);
  return (
    <AreaView>
      {/* <Calendar
        style={styles.calendar}
        current={Date()}
        markingType={'multi-dot'}
        displayLoadingIndicator={false}
        onDayPress={onDayPress}
        markedDates={{
          [selected]: {
            selected: true,
            disableTouchEvent: true,
            selectedColor: '#F65624',
            selectedTextColor: '#fff',
          },
        }}
      /> */}
      <ScrollView style={styles.container}>
        {(list || []).map((item) => (
          <TouchableOpacity
            key={item.courseId}
            style={styles.list}
            onPress={() => {
              navigation.push('ListenCouse', {courseId: item.courseId});
            }}
            activeOpacity={1}>
            <View style={styles.video}>
              <Image
                source={{uri: BaseUrl.imgurl + item.courseImage}}
                style={styles.cover}
              />
              <Image
                source={require('../../assets/images/video_stop.png')}
                style={styles.icon}
              />
            </View>
            <View style={styles.info}>
              <Text style={styles.title}>{item.courseTitle}</Text>
              <Text style={styles.teacher}>授课老师：{item.teacherNam}</Text>
              <Text style={styles.time}>{item.createTime}</Text>
            </View>
          </TouchableOpacity>
        ))}
      </ScrollView>
    </AreaView>
  );
};

export default MyTimeTable;
